<style lang="scss" scoped>
.gpt-time{
  text-align: center;
  font-size: 24rpx;
  margin-bottom: 25rpx;
  margin-top: 30rpx;
}
.my-msg{
  padding-right: 20rpx;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30rpx;
  & > view{
    &:nth-child(1){
      max-width: 562rpx;
      background: #577BED;
      border-radius: 30rpx 0 30rpx 30rpx;
      color: #fff;
      padding: 20rpx 20rpx 20rpx 30rpx;
    }
    &:nth-child(2){
      width: 60rpx;
      height: 60rpx;
      margin-left: 16rpx;
      image{
        border-radius: 50%;
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
}
.gpt-msg{
  padding-left: 20rpx;
  display: flex;
  margin-bottom: 30rpx;

  & > view{
    &:nth-child(2){
      max-width: 562rpx;
      background: #fff;
      border-radius: 0 30rpx 30rpx 30rpx;
      padding: 20rpx 27rpx 30rpx 30rpx;

      & > view{
        &:nth-child(2){
          display: flex;
          justify-content: flex-end;
          padding-top: 30rpx;

          .copy-btn{
            color: #567AED;
          }
          .refresh-btn{
            color: #FAB62E;
            margin-left: 30rpx;
          }

          & > view{
            display: flex;
            align-items: center;
            text{
              margin-right: 8rpx;
            }
          }

        }
      }
    }
    &:nth-child(1){
      width: 60rpx;
      height: 60rpx;
      margin-right: 16rpx;
      image{
        border-radius: 50%;
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
}

.mj-btns{
  & > view{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    & > view{
      padding-left: 20rpx;
      padding-right: 20rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      background: #4e5058;
      border-radius: 8rpx;
      cursor: pointer;
    }
  }
}
.chat-gpt-img{
  max-width: 100%;
}
</style>

<template>
  <view style="padding-top: 30rpx">

    <view v-if="welcomeText" class="gpt-msg">
      <view>
        <image mode="aspectFill" src="../../static/images/ai-icon.png" alt="" />
      </view>
      <view>
        <view>
          {{ welcomeText }}
        </view>
      </view>
    </view>


    <view v-for="(x) in list" :key="x.id">
      <view class="gpt-time">
        {{x.createTime}}
      </view>
      <view class="my-msg">
        <view>
          {{ x.messageText }}
        </view>
        <view>
          <image mode="aspectFill" v-if="userAvatar" :src="userAvatar" alt="" />
          <image mode="aspectFill" v-else src="../../static/images/ai-icon.png" alt="" />
        </view>
      </view>

      <view class="gpt-msg" v-if="x.message && type === 'chat'">
        <view>
          <image mode="aspectFill" src="../../static/images/ai-icon.png" alt="" />
        </view>
        <view>
          <view>
            <mp-html :markdown="true" :content="x.message"></mp-html>
<!--            {{ x.message }}-->
          </view>
          <view>
            <view class="copy-btn" @click="utils.copy(x.message)">
              <text class="iconfont icon-fuzhi"></text>复制
            </view>
            <view class="refresh-btn" @click="refsh(x)">
              <text class="iconfont icon-shuaxin"></text>刷新
            </view>
          </view>
        </view>
      </view>



      <view class="gpt-msg" v-if="type === 'draw'">
        <view>
          <image mode="aspectFill" src="../../static/images/ai-icon.png" alt="" />
        </view>
        <view>
          <view>
            <image mode="aspectFill" v-if="x.url" @click="showImg(x)" class="chat-gpt-img" :src="x.url" alt="" />
            <image mode="aspectFill" v-if="x.status === 0" v-else class="chat-gpt-img-load max-w" src="../../static/images/g-load.png" alt="" />
            <image mode="aspectFill" v-if="x.status === 2" v-else class="chat-gpt-img-load max-w" src="../../static/images/error_img.png" alt="" />
          </view>

          <view class="mj-btns" v-if="x.url && (x.type === 9 || x.type === 10) && x.cbJson && x.cbJson.actions">
            <view>
              <template v-for="j in x.cbJson.actions">
                <view v-if="j !== 'reroll'" @click="actionFn(x, j)">{{ getMjText(j) }}</view>
                <view v-if="j === 'reroll'" @click="actionFn(x, j)"><text class="iconfont icon-shuaxin"></text></view>
              </template>
              <view @click="download(x)"><i class="iconfont icon-xiazai mr-10"></i>下载</view>
              <view @click="showImg(x)"><i class="iconfont icon-tupian mr-10"></i>查看</view>
            </view>
          </view>

          <view class="mj-btns" v-if="x.url && (x.type === 7)">
            <view>
              <view @click="download(x)"><i class="iconfont icon-xiazai mr-10"></i>下载</view>
              <view @click="refsh(x)"><i class="iconfont icon-shuaxin mr-10"></i>刷新</view>
              <view @click="showImg(x)"><i class="iconfont icon-tupian mr-10"></i>查看</view>
            </view>
          </view>

<!--          <view>-->
<!--            <view class="copy-btn">-->
<!--              <text class="iconfont icon-fuzhi"></text>复制-->
<!--            </view>-->
<!--            <view class="refresh-btn">-->
<!--              <text class="iconfont icon-shuaxin"></text>刷新-->
<!--            </view>-->
<!--          </view>-->
        </view>
      </view>
    </view>


    <template v-if="tempMsg != null">
      <view class="my-msg">
        <view>
          {{ tempMsg.my || '' }}
        </view>
        <view>
          <image mode="aspectFill" v-if="userAvatar" :src="userAvatar" alt="" />
          <image mode="aspectFill" v-else src="../../static/images/ai-icon.png" alt="" />
        </view>
      </view>

      <view class="gpt-msg">
        <view>
          <image mode="aspectFill" src="../../static/images/ai-icon.png" alt="" />
        </view>
        <view>
          <view>
            <mp-html :markdown="true" :content="tempMsg.ai || ''"></mp-html>
          </view>
        </view>
      </view>

    </template>
  </view>
</template>

<script>
import MpHtml from "../../lib/mp-html/mp-html";
export default {
  name: "ChatList",
  components: {
    MpHtml
  },
  created() {
    const userInfo = this.storage.getUserInfo()
    if(userInfo && userInfo.id) {
      this.userAvatar = userInfo.avatar
    }
  },
  props: {
    tempMsg: {
      default: null
    },
    welcomeText: {
      default: null
    },
    type: {
      default: 'chat',
      type: String
    },
    list: {
      default: [],
      type: Array
    }
  },
  data() {
    return {
      userAvatar: '',
    }
  },
  methods: {
    showImg(d) {
      uni.previewImage({
        urls: [d.url]
      })
    },
    getMjText(t) {
      const obj = {
        high_variation: '高变换',
        low_variation: '低变换',
        zoom_out_2x: '缩小两倍',
        zoom_out_1_5x: '缩小1.5倍',
        upsample1: '放大第1张',
        upsample2: '放大第2张',
        upsample3: '放大第3张',
        upsample4: '放大第4张',
        variation1: '变换第1张',
        variation2: '变换第2张',
        variation3: '变换第3张',
        variation4: '变换第4张',
        reroll: 'reroll',
        pan_left: '扩充左侧',
        pan_right: '扩充右侧',
        pan_up: '扩充顶部',
        pan_down: '扩充底部',
      }
      return obj[t] || t
    },
    actionFn(data, action) {
      this.$emit('action', data.imageId, action, this.getMjText(action))
    },
    download(d) {
      this.utils.downloadImg(d.url);
    },
    refsh(d) {
      this.$emit('refsh', d)
    }
  }
}
</script>
